<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>森系打字游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .game-container {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 800px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(165, 214, 167, 0.3);
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .title {
            color: #2e7d32;
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }

        .subtitle {
            color: #66bb6a;
            font-size: 1.1em;
        }

        .stats-container {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30px;
            background: #f1f8e9;
            padding: 20px;
            border-radius: 15px;
            border: 1px solid #c5e1a5;
        }

        .stat-box {
            text-align: center;
        }

        .stat-label {
            color: #7cb342;
            font-size: 0.9em;
            margin-bottom: 5px;
        }

        .stat-value {
            color: #2e7d32;
            font-size: 1.8em;
            font-weight: bold;
        }

        .quote-container {
            background: #f5fbf5;
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 25px;
            border: 1px solid #a5d6a7;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .quote {
            font-size: 1.4em;
            line-height: 1.6;
            color: #333;
            text-align: center;
            font-family: 'Georgia', serif;
        }

        .correct {
            color: #2e7d32;
            background-color: rgba(46, 125, 50, 0.1);
        }

        .incorrect {
            color: #c62828;
            text-decoration: underline;
            background-color: rgba(198, 40, 40, 0.1);
        }

        .current {
            background-color: #fff9c4;
            border-radius: 3px;
            padding: 2px 4px;
        }

        .input-container {
            margin-bottom: 25px;
        }

        #typing-input {
            width: 100%;
            padding: 15px;
            font-size: 1.2em;
            border: 2px solid #a5d6a7;
            border-radius: 10px;
            outline: none;
            background: #f5fbf5;
            color: #2e7d32;
            transition: all 0.3s ease;
        }

        #typing-input:focus {
            border-color: #66bb6a;
            box-shadow: 0 0 10px rgba(102, 187, 106, 0.3);
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 25px;
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .btn-primary {
            background: #66bb6a;
            color: white;
        }

        .btn-primary:hover {
            background: #4caf50;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
        }

        .btn-secondary {
            background: #aed581;
            color: white;
        }

        .btn-secondary:hover {
            background: #9ccc65;
            transform: translateY(-2px);
        }

        .particle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #81c784;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
        }

        @keyframes float {
            0% {
                transform: translateY(0) translateX(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) translateX(20px) rotate(360deg);
                opacity: 0;
            }
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e8f5e9;
            border-radius: 4px;
            margin-top: 15px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #66bb6a, #4caf50);
            border-radius: 4px;
            transition: width 0.3s ease;
            width: 0%;
        }

        .instructions {
            text-align: center;
            color: #7cb342;
            margin-top: 20px;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="header">
            <h1 class="title">🌿 森系打字游戏</h1>
            <p class="subtitle">在自然的怀抱中提升打字速度</p>
        </div>

        <div class="stats-container">
            <div class="stat-box">
                <div class="stat-label">速度 (WPM)</div>
                <div class="stat-value" id="wpm">0</div>
            </div>
            <div class="stat-box">
                <div class="stat-label">准确率</div>
                <div class="stat-value" id="accuracy">100%</div>
            </div>
            <div class="stat-box">
                <div class="stat-label">时间 (秒)</div>
                <div class="stat-value" id="timer">0</div>
            </div>
        </div>

        <div class="quote-container">
            <div class="quote" id="quote"></div>
        </div>

        <div class="progress-bar">
            <div class="progress-fill" id="progress"></div>
        </div>

        <div class="input-container">
            <input type="text" id="typing-input" placeholder="开始输入..." autocomplete="off" autofocus>
        </div>

        <div class="controls">
            <button class="btn btn-primary" id="new-quote">新句子</button>
            <button class="btn btn-secondary" id="reset">重置</button>
        </div>

        <p class="instructions">💡 提示：按空格键可以快速获取新句子</p>
    </div>

    <script>
        // 英文名句数组
        const quotes = [
            "The best time to plant a tree was 20 years ago. The second best time is now.",
            "In the middle of difficulty lies opportunity.",
            "The only way to do great work is to love what you do.",
            "Life is what happens to you while you're busy making other plans.",
            "The future belongs to those who believe in the beauty of their dreams.",
            "It is during our darkest moments that we must focus to see the light.",
            "Success is not final, failure is not fatal: it is the courage to continue that counts.",
            "The only impossible journey is the one you never begin.",
            "In this life we cannot do great things. We can only do small things with great love.",
            "The way to get started is to quit talking and begin doing.",
            "Don't let yesterday take up too much of today.",
            "You learn more from failure than from success.",
            "If you are working on something exciting that you really care about, you don't have to be pushed.",
            "The secret of getting ahead is getting started.",
            "The best way to predict the future is to create it."
        ];

        // DOM元素
        const quoteElement = document.getElementById('quote');
        const typingInput = document.getElementById('typing-input');
        const wpmElement = document.getElementById('wpm');
        const accuracyElement = document.getElementById('accuracy');
        const timerElement = document.getElementById('timer');
        const newQuoteBtn = document.getElementById('new-quote');
        const resetBtn = document.getElementById('reset');
        const progressElement = document.getElementById('progress');

        // 游戏状态
        let currentQuote = '';
        let startTime = null;
        let timerInterval = null;
        let totalTyped = 0;
        let correctTyped = 0;

        // 初始化游戏
        function initGame() {
            getRandomQuote();
            resetStats();
            typingInput.value = '';
            typingInput.focus();
        }

        // 获取随机句子
        function getRandomQuote() {
            const randomIndex = Math.floor(Math.random() * quotes.length);
            currentQuote = quotes[randomIndex];
            displayQuote();
        }

        // 显示句子
        function displayQuote() {
            quoteElement.innerHTML = '';
            for (let i = 0; i < currentQuote.length; i++) {
                const charSpan = document.createElement('span');
                charSpan.innerText = currentQuote[i];
                quoteElement.appendChild(charSpan);
            }
            updateProgress();
        }

        // 更新进度条
        function updateProgress() {
            const inputValue = typingInput.value;
            const progress = (inputValue.length / currentQuote.length) * 100;
            progressElement.style.width = Math.min(progress, 100) + '%';
        }

        // 重置统计数据
        function resetStats() {
            if (timerInterval) {
                clearInterval(timerInterval);
            }
            startTime = null;
            totalTyped = 0;
            correctTyped = 0;
            updateStats();
            timerElement.textContent = '0';
        }

        // 更新统计显示
        function updateStats() {
            // 计算WPM (每分钟单词数)
            let wpm = 0;
            if (startTime) {
                const timeElapsed = (Date.now() - startTime) / 1000 / 60; // 分钟
                const wordsTyped = correctTyped / 5; // 英文单词平均5个字符
                wpm = Math.round(wordsTyped / timeElapsed) || 0;
            }
            
            // 计算准确率
            const accuracy = totalTyped > 0 ? Math.round((correctTyped / totalTyped) * 100) : 100;
            
            wpmElement.textContent = wpm;
            accuracyElement.textContent = accuracy + '%';
        }

        // 启动计时器
        function startTimer() {
            if (!startTime) {
                startTime = Date.now();
                timerInterval = setInterval(() => {
                    const timeElapsed = Math.floor((Date.now() - startTime) / 1000);
                    timerElement.textContent = timeElapsed;
                }, 1000);
            }
        }

        // 创建粒子动效
        function createParticles(x, y) {
            for (let i = 0; i < 5; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = x + 'px';
                particle.style.top = y + 'px';
                particle.style.backgroundColor = getRandomGreenColor();
                document.body.appendChild(particle);
                
                const animation = particle.animate([
                    { transform: 'translate(0, 0) rotate(0deg)', opacity: 1 },
                    { transform: `translate(${Math.random() * 40 - 20}px, -100px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
                ], {
                    duration: 1000 + Math.random() * 1000,
                    easing: 'cubic-bezier(0.2, 0.8, 0.3, 1)'
                });
                
                animation.onfinish = () => particle.remove();
            }
        }

        // 获取随机绿色
        function getRandomGreenColor() {
            const greens = ['#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c'];
            return greens[Math.floor(Math.random() * greens.length)];
        }

        // 处理输入变化
        function handleInput() {
            const inputValue = typingInput.value;
            const quoteChars = quoteElement.querySelectorAll('span');
            
            // 更新进度条
            updateProgress();
            
            // 启动计时器
            startTimer();
            
            // 重置所有样式
            quoteChars.forEach(char => {
                char.className = '';
            });
            
            // 检查每个字符
            let correctCount = 0;
            for (let i = 0; i < inputValue.length; i++) {
                if (i < quoteChars.length) {
                    if (inputValue[i] === currentQuote[i]) {
                        quoteChars[i].className = 'correct';
                        correctCount++;
                    } else {
                        quoteChars[i].className = 'incorrect';
                    }
                }
            }
            
            // 标记当前字符
            if (inputValue.length < quoteChars.length) {
                quoteChars[inputValue.length].className = 'current';
            }
            
            // 更新统计
            totalTyped = inputValue.length;
            correctTyped = correctCount;
            updateStats();
            
            // 检查是否完成
            if (inputValue === currentQuote) {
                finishGame();
            }
        }

        // 完成游戏
        function finishGame() {
            clearInterval(timerInterval);
            typingInput.disabled = true;
            
            // 创建庆祝粒子
            const rect = quoteElement.getBoundingClientRect();
            for (let i = 0; i < 20; i++) {
                setTimeout(() => {
                    createParticles(
                        rect.left + Math.random() * rect.width,
                        rect.top + Math.random() * rect.height
                    );
                }, i * 100);
            }
            
            // 显示完成消息
            setTimeout(() => {
                alert(`🎉 恭喜完成！\n速度: ${wpmElement.textContent} WPM\n准确率: ${accuracyElement.textContent}`);
                typingInput.disabled = false;
                typingInput.focus();
            }, 1000);
        }

        // 事件监听器
        typingInput.addEventListener('input', handleInput);

        newQuoteBtn.addEventListener('click', () => {
            getRandomQuote();
            typingInput.value = '';
            resetStats();
            typingInput.focus();
        });

        resetBtn.addEventListener('click', () => {
            initGame();
        });

        // 空格键快速换句
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && e.target !== typingInput) {
                e.preventDefault();
                getRandomQuote();
                typingInput.value = '';
                resetStats();
                typingInput.focus();
            }
        });

        // 点击输入框时创建小粒子
        typingInput.addEventListener('click', (e) => {
            const rect = typingInput.getBoundingClientRect();
            createParticles(e.clientX, rect.top);
        });

        // 初始化游戏
        initGame();
    </script>
</body>
</html>